<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>选项卡</title>
	<style>
	button{
		width: 200px;
		height:60px;
		cursor: pointer;
		background-color:#f5f5f5;
	}
	div{
		width: 700px;
		height: 400px;
		background-color: #fed600;
		display: none;
		line-height: 215px;
		text-align: center;
	}
	</style>
	<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<button id="tab01">tab01</button>
		<button id="tab02">tab02</button>
		<button id="tab03">tab03</button>
		<div class="d1"></div>
		<div class="d2"></div>
		<div class="d3"></div>
		<script>
			$("#tab01").click(function(){
				$("#tab01").css("background-color","#fed600");
				$("#tab02").css("background-color","#f5f5f5");
				$("#tab03").css("background-color","#f5f5f5");
				$(".d1").text("tab文字内容一");
				$(".d1").css("display","block");
				$(".d2").css("display","none");
				$(".d3").css("display","none");
			});
			$("#tab02").click(function(){
				$("#tab02").css("background-color","#fed600");
				$("#tab01").css("background-color","#f5f5f5");
				$("#tab03").css("background-color","#f5f5f5");
				$(".d2").text("tab文字内容二");
				$(".d2").css("display","block");
				$(".d1").css("display","none");
				$(".d3").css("display","none");
			});
			$("#tab03").click(function(){
				$("#tab03").css("background-color","#fed600");
				$("#tab02").css("background-color","#f5f5f5");
				$("#tab01").css("background-color","#f5f5f5");
				$(".d3").text("tab文字内容三");
				$(".d3").css("display","block");
				$(".d1").css("display","none");
				$(".d2").css("display","none");
			});
		</script>
	</body>
</html>